<template>
  <div class="main1">
    <div class="children_nav">
                <div>
                    <div>
                        全城<span class="down_list">▼</span>
                    </div>
                </div>
                <div>
                    <div>
                        品牌<span class="down_list">▼</span>
                    </div>
                </div>
                <div>
                    <div>
                        特色<span class="down_list">▼</span>
                    </div>
                </div>
            </div>

            <div class="content">
                <ul>
                    <li v-for="item in data.cinemas.cinemas" :key="item.id">
                        <h1>{{item.nm}}<span class="red_bold">{{item.sellPrice}}</span><span class="red">元起</span></h1>
                        <p>{{item.addr}}</p>
                        <p class="tag">
                            <span class="hui" v-show="item.tag.allowRefund">退</span>
                            <span class="hui" v-show="item.tag.endorse">改签</span>
                            <span class="jin" v-show="item.tag.snack">小吃</span>
                            <span class="jin" v-show="item.tag.vipTag">折扣卡</span>
                            <span class="hui" v-for="(i,index) in item.tag.hallTypeVOList" :key="index+'10'">{{i.name}}</span>
                        </p>
                        <p v-show="item.promotion.cardPromotionTag != ''"><img src="	https://i.maoyan.com/images/dpmmweb/cinemaList/img/base/base64/card.png">{{item.promotion.cardPromotionTag}}</p>
                    </li>
                </ul>
            </div>

            <mao-yan-aside></mao-yan-aside>
  </div>
</template>

<script>
import axios from 'axios';
import MaoYanAside from '@/components/MaoYanAside.vue';

export default {
  components: { MaoYanAside},
    name:"Cinema",
    data(){
      return{
        data:{cinemas:{cinemas:{}}
        }
      }
    },
    created () {
         axios.get(
                    "/ajax/moreCinemas?movieId=0&day=2021-12-06&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1638788987075&cityId=30&optimus_uuid=EC840BF0533D11EC934BF7F85E54B5E26460D93951184003AD406C15B8110050&optimus_risk_level=71&optimus_code=10"
                ).then(data => {
                    this.data = data.data;
                    console.log("cinema:",this.data);
                }).catch(error => console.log("获取数据失败!",error));
    }
}
</script>

<style>
body article .children_nav,
html article .children_nav,
.main article .main1 .children_nav {
  top: 4rem;
  background-color: white;
  height: 1.2rem;
  display: flex;
  width: 100%;
  position: fixed;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
}

body article .children_nav > div,
html article .children_nav > div,
.main article .children_nav > div {
  width: 33.333%;
  font-size: .346667rem;
  color: #666;
  text-align: center;
}

body article .children_nav > div > div,
html article .children_nav > div > div,
.main article .children_nav > div > div {
  line-height: 0.6rem;
}

body article .children_nav > div .down_list,
html article .children_nav > div .down_list,
.main article .children_nav > div .down_list {
  display: inline-block;
  color: #b6b6b6;
  transform: scale(0.8, 0.5);
}

body article .children_nav > div:nth-of-type(1) > div,
html article .children_nav > div:nth-of-type(1) > div,
.main article .children_nav > div:nth-of-type(1) > div {
  border-right: 1px solid #ebebeb;
}

body article .children_nav > div:nth-of-type(3),
html article .children_nav > div:nth-of-type(3),
.main article .children_nav > div:nth-of-type(3) {
  border-left: 1px solid #ebebeb;
}

body article .main1 .content,
html article .main1 .content,
.main article .main1 .content {
  background-color: white;
  margin-top: 1.2rem;
  padding: 0 10px;
}

body article .main1 .content li,
html article .main1 .content li,
.main article .main1 .content li {
  width: 100%;
  padding: 20px 0px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ebebeb;
  align-content: center;
}

body article .main1 .content li .red_bold,
html article .main1 .content li .red_bold,
.main article .main1 .content li .red_bold {
  color: #e54847;
  font-size: 19px;
  font-weight: normal;
  margin: 0 3px 0 10px;
}

body article .main1 .content li .red,
html article .main1 .content li .red,
.main article .main1 .content li .red {
  color: #e54847;
  font-size: 12px;
}

body article .main1  .content li p,
html article .main1 .content li p,
.main article .main1 .content li p {
  font-size: 13px;
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  color: #666;
  text-overflow: ellipsis;
}

body article .main1 .content li p span,
html article  .main1 .content li p span,
.main article .main1 .content li p span {
  box-sizing: border-box;
  padding: 0 2px;
  border-radius: 2px;
  margin-right: 3px;
}

body article .main1 .content li p .hui,
html article .main1 .content li p .hui,
.main article .main1 .content li p .hui {
  border: 1px solid #589daf;
  color: #589daf;
}

body article .main1 .content li p .jin,
html article .main1 .content li p .jin,
.main article .main1 .content li p .jin {
  border: 1px solid #faaf00;
  color: #faaf00;
}

body article .main1 .content li p img,
html article .main1 .content li p img,
.main article .main1 .content li p img {
  width: 15px;
}

body article .main1 .content li > p:nth-last-of-type(1),
html article .main1 .content li > p:nth-last-of-type(1),
.main article .main1 .content li > p:nth-last-of-type(1) {
  font-size: 12px;
  display: flex;
  color: #666;
  align-items: center;
}

body article .main1 .content li .tag,
html article .main1 .content li .tag,
.main article .main1 .content li .tag {
  overflow: inherit;
}

body article .main1 .content li h1,
html article .main1 .content li h1,
.main article .main1 .content li h1 {
  font-size: 15px;
  font-variant: small-caps;
  margin-bottom: 5px;
}

</style>